$sidebarTopOffset: 60px;

.sidebar
  width: $sidebar-width
  height: calc(100vh - 56px - #{$sidebarTopOffset})
  margin-top: $sidebarTopOffset
  padding-top: 30px
  padding-bottom: 30px
  overflow-y: scroll;
  overflow-x: hidden;

  &.fixed
    position: fixed
    top: $sidebarTopOffset

  ul
    list-style: none
    padding: 0 !important
    margin: 0 !important

  li
    display: inline-block
    height: 40px
    margin: 0
    padding: 0
    width: 100%

    ul
      padding-left: 1em !important

    a
      height: 40px
      display: inline-block
      width: 100%
      line-height: 40px
      text-decoration: none
      font-weight: 300
      color: rgba(32, 28, 56, 0.8)
      font-family: OpenSans, helvetica, sans-serif
      transition: transform .2s ease

      &:before
        content: ''
        display: block
        width: 10px
        height: 10px
        background: $accent-color
        border-radius: 100%
        position: absolute
        top: 50%
        left: -20px
        opacity: 0
        transform:  translateY(-50%)
        transition: opacity .2s ease 0.15s

      &.navItem-active
        color: #201c38
        font-weight: 600
        transform: translateX(20px)
        transition: transform .2s ease

        &:before
          opacity: 1

  @include small-mq
    width: calc(100% + 16px)
    margin-top: 0
    height: 100vh
    max-width: 320px
    position: fixed
    overflow: auto
    left: 0
    top: 50px !important
    border: none
    padding-top: 0
    background: #fefefe
    z-index: 150
    display: block
    padding: 1em
    box-shadow: -20px 0 100px rgba(0,0,0,0.25)
    padding-top: 1em

    transform: translateX(-100%)
    will-change: transform
    transition: transform 0.3s ease

    .sidebar-header
      max-width: calc(100% - 1em)

    &.Showed
      transform: translateX(0)

    .sidebar-container
      width: 100%
      max-width: 100%

.sidebar-opener
  position: fixed
  left: 2em
  bottom: 2em
  height: 52px
  width: 52px
  background: #39b1de
  background-image: url(../assets/img/open-doc-menu_icon.svg),  linear-gradient(284deg, darken(#fcb43a, 15%), darken(#fedd4e, 15%))
  background-repeat: no-repeat
  background-position: 65% center, center center
  background-size: 60%, 100%
  z-index: 11
  border-radius: 50%
  box-shadow: 0 6px 8px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2)
  transition: transform 0.2s ease, left 0.2s ease
  transform-origin: center center
  cursor: pointer
  display: none
  z-index: 99999

  @include small-mq
    display: block

  &:active
    transform: scale(0.9)

  &.Showed
    transform: rotate(-180deg)
    transform-origin: center center
    background-image: url(../assets/img/open-doc-menu_icon.svg),  linear-gradient(284deg, darken(#fcb43a, 15%), darken(#fedd4e, 15%))
    left: 340px
